<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$Title$</title>
</head>
<body>
  <button onclick="f1()">获取商品</button>
  <table border="1px">
    <caption>商品表</caption>
    <th>商品名称</th>
    <th>商品价格</th>
    <th>商品库存</th>
  </table>
</body>
<script>
  let products = [
    {name: 'iPhone', price: 8888, stock: 100},
    {name: 'iPad', price: 6666, stock: 200},
    {name: 'iWatch', price: 5555, stock: 300},
    {name: 'Mac', price: 4444, stock: 400}
  ];
  function f1() {
    let tbody = document.querySelector('tbody');
    for (let i = 0; i < products.length; i++) {
      let tr = document.createElement('tr');
      let td1 = document.createElement('td');
      let td2 = document.createElement('td');
      let td3 = document.createElement('td');
      td1.innerText = products[i].name;
      td2.innerText = products[i].price;
     td3.innerText = products[i].stock;
     tr.append(td1,td2,td3);
     tbody.append(tr);

    }
  }

  let p1 = {
    name:'张三',
    age:18,
    sex:'男',
    say:function(){
      return '我是'+this.name+',今年'+this.age+'岁';
    }
  }
  console.log(p1.say());
  let p2 = {}
  p2.name = '李四';
  p2.age = 19;
  p2.sex = '女';
  p2.say = function(){
    console.log( '我是'+this.name+',今年'+this.age+'岁');
  }
  p2.say();
</script>
</html>